<template>
  <a-modal destroyOnClose v-model="visible" :title="title" width="60vw" :bodyStyle="bodyStyle()">
    <a-steps v-model="step.current" type="navigation" size="small" :style="step.stepStyle">
      <a-step :status="step.status1" :disabled="true" title="选择模板" />
      <a-step :status="step.status2" :disabled="true" title="方案生成" />
    </a-steps>
    <div v-if="steps === 1">
      <tempList @getRadio="getRadio" @getHistoryRadio="getHistoryRadio"></tempList>
    </div>
    <div v-if="steps === 2">
      <a-row :gutter="12">
        <a-col :span="6">
          <LeftTree ref="leftTree" @selected="getTreeData" :model="model"
           :templateId="templateId" :historyTemplateId="historyTemplateId"
           :proId="proId"></LeftTree>
        </a-col>
        <a-col :span="18">
          <tempForm
            ref="tempForm"
            :id="id"
            :model="model"
            :templateId="templateId"
            :historyTemplateId="historyTemplateId"
            @saveFormSuccess="saveFormSuccess"
          ></tempForm>
        </a-col>
      </a-row>
    </div>
    <template slot="footer">
      <a-button style="padding-left: 8px; padding-right: 8px" @click="close()"> 关闭 </a-button>
      <a-button v-if="steps === 1" type="primary" style="padding-left: 8px; padding-right: 8px" @click="next()">
        下一步
      </a-button>
      <a-popconfirm v-if="steps === 2" title="确认生成吗?" @confirm="() => save()">
        <a-button type="primary" style="padding-left: 8px; padding-right: 8px"> 确认 </a-button>
      </a-popconfirm>
    </template>
  </a-modal>
</template>
<script>
import { getAction } from '@/api/manage'
import LeftTree from './LeftTree'
import tempList from './tempList'
import tempForm from './tempForm'

export default {
  props: ['id'],
  name: 'contentView',
  components: {
    LeftTree,
    tempList,
    tempForm,
  },
  data() {
    return {
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      model: {},
      steps: 1,
      template: {},
      templateId: '',
      historyTemplateId: '',
      step: {
        current: 0,
        status1: 'process',
        status2: 'wait',
        stepStyle: {
          marginBottom: '60px',
          boxShadow: '0px -1px 0 0 #e8e8e8 inset',
        },
      },
      url: { getFnId: '/sjxmzygl/sjWorkZtfa/createZtfaId' },
    }
  },
  watch: {
    steps: {
      handler(val) {
        if (val === 1) {
          this.step.current = 0
          this.step.status1 = 'process'
          this.step.status2 = 'wait'
        } else {
          this.step.current = 1
          this.step.status1 = 'finish'
          this.step.status2 = 'process'
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    bodyStyle() {
      let style = {}
      style['maxHeight'] = 'calc(80vh - 100px)'
      style['overflowY'] = 'auto'
      return style
    },
    getRadio(val, data) {
      this.template = data
      this.templateId = val
      this.historyTemplateId = ''
      console.log('tem', val)
      console.log('tep', this.historyTemplateId)
    },
    getHistoryRadio(val) {
      this.historyTemplateId = val
      this.templateId = ''
      console.log('tem', this.templateId)
      console.log('his', val)
    },
    add() {
      this.model = {}
      this.steps = 1
      this.templateId = '1'
      this.visible = true
    },
    edit(record) {
      this.model = record
      this.templateId = record.templateId
      this.historyTemplateId = record.mbId
      this.proId = record.proId
      this.steps = 2
      this.visible = true
    },
    close() {
      this.visible = false
    },
    next() {
      getAction(this.url.getFnId, { templateId: this.templateId }).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.model.id = res.result
          this.steps = 2
          this.$nextTick(()=>{
            this.$refs.tempForm.initData({
              type: this.template.type,
              ztype: this.template.cate,
            })
          })
        } else {
        }
      })
    },
    save() {
      this.$refs.tempForm.saveForm()
    },
    saveFormSuccess() {
      this.visible = false
      this.$emit('ok')
    },
    getSelectPath(path) {
      console.log(path)
    },
    getTreeData(data, path) {
      debugger
      if (data.type === '1') {
        this.$refs.tempForm.title = ''
      } else {
        this.$refs.tempForm.title = data.title
        this.$refs.tempForm.addKey(path)
      }
    },
  },
}
</script>

<style lang='less' scoped>
@import '../../../css/checkAndEdit.less';

/deep/ .ant-steps {
  margin-bottom: 10px !important;
}
</style>
